import React, { Component } from 'react';

export class App extends Component {
  render() {
    return (
      <div>
        <h1>App 父组件</h1>
        <Consumer>{(value) => <h2>{value}</h2>}</Consumer>
      </div>
    );
  }
}

// Consumer 组件内部调用 children
class Consumer extends Component {
  // Consumer 内的数据
  state = {
    value: 'Consumer组件内的值',
  };

  render() {
    return <>{this.props.children(this.state.value)}</>;
    // 区别，父组件可以按照需求换标签
    // return <h2>{this.state.value}</h2>;
  }
}

export default App;
